<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
</head>

<body>
    <div id="app">
        {{arr}}
        <button @click="arrCli">改</button>
    </div>
    <script>
        Vue.config.productionTip = false;
        const vm = new Vue({
            el: "#app",
            data() {
                return {
                    arr: [45, 78, 45, 6, 4]
                };
            },
            methods: {
                arrCli() {
                    // this.arr[0] = '55' //无效
                    // this.arr.length = 20// 无效
                    // this.arr.length = 0 //无效
                    // 使用数组时使用下标添加删除或者修改length都是无效的,不会拥有响应式
                    // vue为我们封装了修改数组的七个方法 pop push shift unshift sort reverse splice
                    //  使用这七个方法会直接触发响应式

                    // 对于不会修改原数组,返回新数组的几个方法 map 等,直接使用赋值替换掉原数组也可以触发响应式
                }
            },
        });
    </script>
</body>

</html>